import React, { useState } from 'react';
import CropperWrapper from '../../components/Cropper';

const CropperJSWrapperExample = () => {
  const updateCanvasData = () =>{};
  const defaultCroppedData = {};
  const imageUrl = 'https://cdn.thisiswhyimbroke.com/images/creepy-horse-head-squirrel-feeder2.jpg';
  const style = {};
  const classname = 'cropper-container';

  const [containerData, setContainerData] = useState(null);
  const [canvasData, setCanvasData] = useState(null);
  const [croppedData, setCroppedData] = useState(defaultCroppedData);

  const [getter, setGetter] = useState({ action: '', func: ()=>{} });
  const [setter, setSetter] = useState({ action: '', data: {} });

  const onCrop = (cropEvent) => {
    setGetter({ action: 'getCanvasData', func: updateCanvasData });
    setCroppedData(cropEvent.detail);
  };

  const initializeCropper = () => {
    setGetter({ action: 'getCanvasData', func: setCanvasData });
    setGetter({ action: 'getContainerData', func: setContainerData });
    setGetter({ action: 'getData', func: setCroppedData });
    console.log(containerData, canvasData, croppedData);
  };

  const onZoom = () => {
    setGetter({ action: 'getCanvasData', func: setCanvasData });
  };

  return (
    <CropperWrapper
      style={style}
      className={classname}
      imageUrl={imageUrl} // required
      onCrop={onCrop} // required
      onReady={initializeCropper}
      onZoom={onZoom}
      getter={getter}
      setter={setter}
    />
  )
};

export default React.memo(CropperJSWrapperExample)
